<!--
 * @Author: dfh
 * @Date: 2024-03-20 10:33:14
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <!-- <BackWidget /> -->
        <view class="header-nav-wrap">
            <!-- <header-search></header-search> -->
            <nav-list :navList="navList" :currentIndex="navCurrentIndex" @onNavItemClick="onNavItemClick"></nav-list>
        </view>

        <scroll-view class="card-list-wrap" scroll-y>
            <CardList v-if="navCurrentIndex === 0" :data="bankList"></CardList>
                <PowerList v-else :data="articleList"></PowerList>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import headerSearch from '@/components/header-search/index.vue';
import NavList from '@/components/nav-list/index.vue';
import CardList from './components/card-list.vue'
import PowerList from './components/power-list.vue';
import { fetchBankList } from '@/services/bank';
import { onLoad } from '@dcloudio/uni-app';
import { showToast } from '@/utils/toast'
import { fetchArticleList } from '@/services/home'
import BackWidget from '@/components/back-widget/index.vue'

const navList = ref(['全部', '选卡攻略']);
const navCurrentIndex = ref(0);
const bankList = ref([]);
const articleList = ref([]);

onLoad(({navIndex}) => {
    if(navIndex){
        navCurrentIndex.value = navIndex;
    }
    getBankList();
    getArticleList();
})

const getBankList = async () => {
    const { msg, status, data } = await fetchBankList();
    if (status === 1) {
        bankList.value = data || [];
    } else {
        showToast(msg || '获取银行卡列表失败')
    }
}

const getArticleList = async () => {
    const { msg, status, data } = await fetchArticleList();
    if (status === 1) {
        const { list } = data;
        articleList.value = list || [];
    } else {
        showToast(msg || '获取文章失败')
    }
}




const onNavItemClick = (index) => {
    navCurrentIndex.value = index;
}
</script>

<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    background: rgba(241, 245, 251, 1);
    display: flex;
    flex-direction: column;

    .header-nav-wrap {
        width: 100%;
        height: 80rpx;
        /* height: 260rpx; */
    }

    .content-warp {
        width: 100%;
        height: 100%;
       
    }

    .card-list-wrap {
        width: 100vw;
        height: calc(100% - 80rpx);
        /* height: calc(100% - 260rpx); */
        box-sizing: border-box;
        padding: 0 30rpx;

    }
}
</style>